<template>
  <div class="linear-header">
    <van-card
      v-if="!content.img"
      title="立即登录"
      thumb="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
      @click="$router.push({ name: 'login' })"
    >
      <template #tags>
        <van-tag plain size="medium" type="warning">乐享值</van-tag>
        <van-tag plain size="medium" type="warning">小白积分xxx分</van-tag>
      </template>
      <template #footer>
        <van-icon name="setting-o" size="20px" />
      </template>
    </van-card>

    <van-card v-else :title="content.name" :thumb="content.img">
      <template #tags>
        <van-tag plain size="medium" type="warning">乐享值</van-tag>
        <van-tag plain size="medium" type="warning">小白积分999分</van-tag>
      </template>
      <template #footer>
        <van-icon name="setting-o" size="20px" @click="$router.push({name:'account'})"/>
      </template>
    </van-card>
  </div>
</template>

<script lang="ts" setup>
defineProps(['content'])

</script>

<style scoped>
.van-card {
  background-color: rgba(255, 255, 255, 0.1);
}
.van-tag {
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 4px;
}

::v-deep(.van-card__title) {
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 20px;
  --van-card-title-line-height: 30px;
}

::v-deep(.van-card__thumb) {
  width: 50.4px;
  height: 50.4px;
}

::v-deep(.van-card__header) {
  align-items: center;
  height: 85.2px;
}

.van-card {
  padding-bottom: 0;
  padding-top: 0;
  max-height: 85.2px;
  /* box-sizing: border-box; */
  position: relative;
}

::v-deep(.van-card__footer) {
  position: absolute;
  bottom: 0px;
  right: 20px;
}
</style>
